<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>网格人员管理</span>
      </div>
      <el-container
        :style="{ width: offsetwidth + 'px', height: offsetheight + 'px' }"
      >
        <el-aside width="300px">
          <div class="custom-tree-node">
            <span>一级：{{ top.name }}</span>
            <span>
              <el-button type="text" size="mini" @click="showUser(top)">
                查看用户
              </el-button>
            </span>
          </div>
          <el-tree
            :data="treedata"
            :expand-on-click-node="false"
            :default-expand-all="true"
            class="tree"
            node-key="id"
            :props="props1"
            v-if="showTree"
            :indent="20"
            :style="{ height: offsetheight + 'px' }"
            @node-click="showUser"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span> </span>
            </span>
          </el-tree>
        </el-aside>
        <el-main style="padding-top: 0px">
          <!-- <position></position> -->
          {{ title }}

          <el-tabs v-model="activeName2" type="card" v-if="show" class="mt10">
            <el-tab-pane label="网格信息" name="first">
              <gride :obj="currentGride"></gride>
            </el-tab-pane>
            <el-tab-pane label="人员信息" name="second">
              <user :obj="currentGride"></user>
            </el-tab-pane>
            <!-- 
			<el-tab-pane label="企业信息" name="third">
				<unloading :obj="currentGride" :gridarr="treedata"></unloading>
			</el-tab-pane>
			<el-tab-pane label="执行部门信息" name="fourth">
				<member :obj="currentGride"></member>
			</el-tab-pane>
			-->
          </el-tabs>
        </el-main>
      </el-container>
    </el-card>

    <el-dialog
      title="添加用户"
      width="70%"
      :visible.sync="userDialogFormVisible"
    >
      <el-form ref="device" label-width="180px">
        <el-form-item label="账号:">
          <el-input v-model="userForm.login_name"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="userForm.mobile"></el-input>
        </el-form-item>

        <el-form-item label="角色:">
          <el-checkbox
            v-for="(item, index) in roleList"
            v-model="checked5"
            :key="index"
            :label="item.role_id"
            border
            size="medium"
          >
            {{ item.role_name }}
          </el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="createUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import gride from "./components/gride";
import member from "./components/member";
import unloading from "./components/unloading";
import user from "./components/user";

import position from "@/components/position/index";

export default {
  name: "userList",

  data() {
    return {
      offsetheight: document.documentElement.clientHeight - 60 - 20 - 20, //
      offsetwidth: document.documentElement.clientWidth - 200 - 50,
      treedata: [],
      showTree: false,
      top: {},
      props1: {
        label: "name",
      },
      form: {},
      userList: {},
      pageNo: 1,
      pageSize: 10,
      userDialogFormVisible: false,
      userForm: {},

      reason: "",

      currentGride: {},

      roleList: [],

      checked5: [],

      activeName2: "first",

      subGrideList: {},
      subUserList: {},
      subUnloadingList: {},
      subMemberList: {},

      show: false,

      title: "",
    };
  },

  props: {},

  components: {
    gride,
    member,
    unloading,
    user,
    position,
  },

  computed: {
    ...mapGetters([]),
  },

  methods: {
    init() {
      this.$http({
        fun: "grideList",
        cb: (res) => {
          const result = this.$util.transData(
            res,
            "id",
            "parent_id",
            "children"
          );
          console.log('result:', result);
          this.top = result[0];
          this.treedata = result[0].children;
          this.showTree = true;
        },
      });
    },
    showUser(item) {
      if (item.id == "1") {
        this.title = "所有网格";
      } else {
        this.$http({
          fun: "getPidGridName",
          id: item.id,
          cb: (res) => {
            console.log("res");
            console.log(res);
            this.title = res;
          },
        });
      }
      this.show = false;
      this.currentGride = item;
      this.$nextTick(() => {
        this.show = true;
      });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },

    handleCurrentChange(val) {
      this.pageNo = val;
      this.init();
    },

    onSubmit() {},

    addUser() {
      this.userDialogFormVisible = true;
    },

    createUser() {
      console.log("createUser");
      this.$http({
        fun: "createUser",
        grid_id: this.currentGride.id,
        login_name: this.userForm.login_name,
        password: this.userForm.password,
        mobile: this.userForm.mobile,
        name: this.userForm.name,
        rolelist: this.checked5.join(","),
        cb: (res) => {
          console.log(res);
          this.showUser(this.currentGride);
        },
      });
    },
  },

  watch: {},

  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
